<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>拖放</title>

		<style type="text/css">
			#div1 {
				width: 800px;
				height: 600px;
				padding: 10px;
				border: 1px solid #aaaaaa;
			}
		</style>

		<script type="text/javascript">
			
			
			function allowDrop(event) {
				// 防止默认拖放处理
				event.preventDefault();
			}

			/**
			 * 开始拖
			 * */
			function drag(event) {
				
				event.dataTransfer.setData("Text", event.target.id);
			}

			/**
			 * 开始放
			 * */
			function drop(event) {
				event.preventDefault();
				var data = event.dataTransfer.getData("Text");
				event.target.appendChild(document.getElementById(data));
			}
		</script>
	</head>

	<body>
		<p>请把图片拖放到矩形中：</p>

		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<br />

		<!--
			draggable: 设置为可拖放元素
			ondragstart: 拖动开始
		-->
		<img id="drag1" src="https://ws1.sinaimg.cn/large/c808130agy1fmtx998i6mj20i20cggmf.jpg" draggable="true" ondragstart="drag(event)" />
	</body>

</html>